<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>局域网聊天室</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="chat-container">
    <div class="chat-header">
      <h1 class="desktop-title">局域网聊天室</h1>
      <h1 class="mobile-title">Chat</h1>
      <button id="copyServerAddress" class="copy-server-btn theme-toggle" title="复制服务器地址">
        <svg t="1736927574123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6026" width="24" height="24">
          <path
            d="M864.768 126.976h-573.44c-17.92 0-32.256 14.336-32.256 32.256v98.816H159.744c-17.92 0-32.256 14.336-32.256 32.256v573.44c0 17.92 14.336 31.744 32.256 31.744h573.44c17.92 0 31.744-14.336 31.744-31.744v-99.328h99.84c17.92 0 31.744-14.336 31.744-31.744v-573.44c0.512-17.92-13.824-32.256-31.744-32.256z m-31.744 573.44h-67.584V290.304c0-17.92-14.336-32.256-31.744-32.256h-409.6v-66.56h509.44v508.928z"
            p-id="6027"></path>
        </svg>
      </button>
      <button id="themeToggle" class="theme-toggle" title="切换主题">

        <svg class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <circle cx="12" cy="12" r="6" fill="#ffffff" />
          <circle cx="12" cy="12" r="4" fill="#ffffff" />
          <path fill="#ffffff"
            d="M11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />
        </svg>
        <svg t="1736929896309" class="moon-icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="23548" width="24" height="24">
          <path
            d="M611.441778 119.466667a405.048889 405.048889 0 0 1-391.168 511.203555A415.459556 415.459556 0 0 1 113.777778 616.675556 405.504 405.504 0 0 0 504.945778 915.911111 405.048889 405.048889 0 0 0 910.222222 510.634667 405.048889 405.048889 0 0 0 611.441778 119.466667z"
            p-id="23549" fill="#ffffff"></path>
        </svg>
      </button>
      <button id="changeNickname" class="change-nickname-btn" title="修改昵称">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
          <path fill="currentColor"
            d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
        </svg>
      </button>
      <div class="connection-status">
        <span class="status-dot"></span>
        <span class="status-text">连接中...</span>
      </div>
    </div>

    <div class="chat-main">
      <div class="user-list">
        <h3>在线用户</h3>
        <ul id="userList"></ul>
      </div>

      <div class="chat-window">
        <div class="messages" id="messages"></div>
        <div class="input-container">
          <div class="input-actions">
            <input id="messageInput" placeholder="输入消息..."></textarea>
            <button id="sendBtn">发送</button>
            <button class="upload-btn" id="uploadBtn">
              <span>发送文件</span>
            </button>
          </div>
          <div class="progress-container">
            <div class="progress-bar"></div>
            <div class="progress-text"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 昵称设置模态框 -->
  <div id="nicknameModal" class="modal">
    <div class="modal-content">
      <h2>设置昵称</h2>
      <input type="text" id="nicknameInput" placeholder="请输入昵称" maxlength="20">
      <button id="confirmNickname">确定</button>
    </div>
  </div>

  <script type="module" src="js/main.js"></script>
</body>

</html>